<template>
  <header>
    <span class="iconfont header__icon" @click="handleBack">&#xe65e;</span>
    编辑收货地址
    <span class="header__new" @click="handlePreserve">保存</span>
  </header>
  <div class="wrapper">
    <div class="content">
      <ul>
        <li class="item" v-for="item in list" :key="item.k">
          <span class="item__tittle">{{ item.k }}</span
          ><input
            type="text"
            class="item__input"
            :placeholder="item.v"
            v-model="item.result"
          />
        </li>
      </ul>
    </div>
  </div>
  <Toast :message="message" v-if="show" />
</template>

<script>
import {  reactive } from "vue";
import { useRoute } from "vue-router";
import { useNewAddress } from "../../utils/postAddress";
import Toast, { useToast } from "../../components/Toast";
import { get } from "../../utils/post";

const useChangeAddress = () => {
  const route = useRoute();
  const id = route.params.id;
  const list =reactive( [
      { k: "所在城市：", v: "如北京市",  },
      {
        k: "小区/大厦/学校：",
        v: "如理工大学国防科技园"
      },
      { k: "楼号-门牌号：", v: "A号楼B层", },
      { k: "收货人：", v: "请填写收货人的姓名" , },
      { k: "联系电话：", v: "请填写收货手机号" , },
    ]);
  const getData = async () => {
    const result = await get(`/api/user/address/${id}`);
    list[0].result=result.data.city;
    list[1].result=result.data.department;
    list[2].result=result.data.houseNumber;
    list[3].result=result.data.name;
    list[4].result=result.data.phone;
  };
  getData();
  return { id,list };
};

export default {
  name: "changeAddress",
  components: { Toast },
  setup() {

    const {  id,list } = useChangeAddress();
    const { show, message, changeMessage } = useToast();
    // 从useNewAddress中引入{ handleBack, handlePreserve }
    const { handleBack, handlePreserve } = useNewAddress(
      list,
      changeMessage,
      `api/user/address/${id}`
    );
    return {
      list,
      handleBack,
      handlePreserve,
      show,
      message,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/viriables";
p,
h3,
ul,
input {
  padding: 0;
  margin: 0;
  list-style: none;
}
input {
  border: none;
  outline: none;
}
header {
  height: 0.44rem;
  text-align: center;
  line-height: 0.44rem;
  font-size: 0.16rem;
  color: $content-fontcolor;
  position: relative;
  .header__icon {
    position: absolute;
    left: 0.18rem;
  }
  .header__new {
    position: absolute;
    right: 0.18rem;
    font-size: 0.14rem;
  }
}
.wrapper {
  position: absolute;
  top: 0.44rem;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $content-bgcolor;
  padding-top: 0.12rem;
  .content {
    background-color: #fff;
    padding: 0 0.18rem;
    .item {
      height: 0.45rem;
      padding: 0.12rem 0;
      display: flex;
      line-height: 0.2rem;
      font-size: 0.14rem;
      box-sizing: border-box;
      border-bottom: 1px solid $content-bgcolor;
      &:last-child {
        border: none;
      }
      &__tittle {
        height: 0.2rem;
        color: $content-inputcolor;
      }
      &__input {
        flex: 1;
        color: $content-fontcolor;
        &::placeholder {
          color: #999;
        }
      }
    }
  }
}
</style>